<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<fieldset id="app">
			<legend><h2>这是app实例</h2></legend>
			<child1 :c1-msg="msg" :c1_num="appNum" :c1_arr="arr" ></child1>
		</fieldset>
		
		<template id="child1">
			<fieldset>
				<legend>这是child1组件</legend>
				<p>接收app实例的数据：{{c1Msg}}</p>
				<p>接收app实例的数据：{{c1_num}}</p>
				<p v-for="(v,k,i) in c1_arr">{{v}}</p>
			</fieldset>
		</template>
		<script type="text/javascript">
			/* 
				父实例向子组件里传数据：通过props字段设置自定义属性
				1、给子组件设置props字段，用于接收从外部传入的值
				2、在使用组件的地方以属性绑定的方式给自定义属性赋值
				3、子组价在组件内通过设置的props获取数据，展示
			 */
			let child1={
				template:"#child1",
				//设置props自定义属性
				props:{
					//驼峰命名法 在标签中绑定属性时需要将大写改为-小写
					c1Msg:String,
					c1_num:{type:Number,default:100},//default 不使用不设置默认为100
					//如果输入属性的类型是一个数组或者对象，在设置默认值的时候，默认值需要写成一个函数，将默认值return出来
					c1_arr:{type:Array,default(){return [22,56,7,8,990,0087,32]}}
				}
			}
			new Vue({
				el:'#app',
				data:{
					msg:"app实例数据",
					appNum:998,
					arr:[11,22,33,44,55,6]
				},
				methods:{
					
				},
				computed:{
					
				},
				components:{
					child1
				}
			})
		</script>
	</body>
</html>
